<!--
 * @Description:  标题组件
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-03-16 09:01:37
 * @LastEditors: zhou
 * @LastEditTime: 2022-05-20 17:55:38
-->
<template>
    <div class="pro-title forbid">
        <div class="label">
            {{ label }}
        </div>
        <div class="more flexrbc" @click="onShow" :style="{ color: more_color }">
            {{ more }}
            <div v-if="show_icon" class="icon"></div>
        </div>
        <div v-if="show_detail" class="detail pointer" @click="onClick">
            详情
            <img class="pic" src="~@/assets/images/proview/detail.png" alt="" />
        </div>
    </div>
</template>

<script>
export default {
    name: "ProTitle",
    props: {
        label: {
            type: String,
            default: "",
        },
        more: {
            type: String,
        },
        show_icon: {
            type: Boolean,
            default: false,
        },
        show_detail: {
            type: Boolean,
            default: false,
        },
        more_color: {
            type: String,
            default: "rgba(255, 255, 255, 0.4)",
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
        tabComp(id) {
            this.$emit("tabComp", id);
        },
        onClick() {
            this.$emit("detail");
        },
        onShow() {
            this.$emit("onShow");
        },
    },
};
</script>

<style lang="scss" scoped>
.pro-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: vh(10);
    width: 100%;
    background: url("~@/assets/images/proview/title.png") no-repeat 0 0;
    background-size: 100% 100%;
    height: vh(45);
    padding-left: vw(16);
    .label {
        font-size: vh(16);
        color: #2ef7fc;
        // width: vw(140);
    }

    .more {
        cursor: pointer;
        font-family: "Microsoft YaHei UI";
        font-size: vw(13);
        transform: translateY(vh(5));
        .icon {
            width: vw(10);
            height: vh(18);
            margin-left: vw(5);
            background: url("~@/assets/images/proview/detail.png") no-repeat 0 0;
            background-size: 100% 100%;
        }
    }
    .detail {
        color: #fff;
        transform: translateY(vh(4));
        .pic {
            margin-left: vw(3);
            width: vw(8);
            height: vh(14);
            transform: translateY(vh(2));
        }
    }
}
</style>
